<template>
  <view class="c-images-grid">
    <view @tap="imgListPreview(index)" v-for="(image,index) in images" :key="index">
      <view class="imgBox">
        <u-image width="100%" height="100%" :src="image"></u-image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "j-images-grid",
  props: {
    images:{
      type: Array,
      default: ()=>[]
    }
  },
  methods: {
    imgListPreview(index){
      uni.previewImage({
        indicator:"number",
        loop:true,
        current:index,
        urls: this.images
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.c-images-grid{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  &>view{
    position: relative;
    width:32.8%;
    padding:32.8% 0 0;
    background-size: cover;
    background-position: center center;
    margin: 0.2%;
  }
}
.imgBox{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}
</style>
